<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Napi</title>
</head>
<style type="text/css">
    body {
        background-color: var(--vscode-editor-background, #000000);
        margin:0 auto;
        font-family: "Microsoft YaHei";
        opacity: 0.9;
    }
    a {
        text-decoration: none;
    }

    button.button {
        font-family: "Microsoft YaHei";
        font-size: 13px;
        border-radius: 3px;
        align-self: center;
        outline: none;
        width: 100px; 
        height:24px
    }

    input.text {
        width: 250px; 
        vertical-align:middle;

        background-color: var(--vscode-editor-background, #000000);
        color: var(--vscode-editor-foreground, #ffffff);
        border-radius: 6px;
        border: 1px solid #555555;
        opacity: 0.9;
        height: 24px;
    }
    input.text:hover {
        outline: none;
        border-color: var(--vscode-focusBorder, #272727);
    }
    .tabs{
        position: relative;
        height: 800px;
        min-height: 800px;
        max-height: 800px;
        clear: both;
        margin: 25px 0;
        overflow: hidden;
    }
    .tab{
        float: left;
        margin: 25px 0;
    }
    .tab label{
        background: #eee;
        padding: 10px 20px;
        position: relative;
        left: 1px;
        border: 0px solid;
        margin-left: -1px;
        z-index: 2;
        color: #333333;
        background: white;
    }
    
    .content{
        position: absolute;
        top: 61px;
        left: 0;
        right: 0;
        bottom: 0;
        background: black;
        padding: 20px 20px;
        border: 0px solid #ccc;
        max-height: 800px;
        overflow: scroll;
    }
    [type=radio]:checked ~ label{
        color: white;
        background: #3288e9;
        border: 0px solid #ccc;
        z-index: 3;
    }
    [type=radio]:checked ~ label ~ .content{
        z-index: 1;
    }
    .simtextarea{
        width: 254px;
        min-height: 24px;
        max-height: 220px;
        line-height: 24px;
        word-wrap: break-word;
        overflow-x: hidden;
        overflow-y: auto;

        background-color: var(--vscode-editor-background, #000000);
        color: var(--vscode-editor-foreground, #ffffff);
        border-radius: 6px;
        border: 1px solid #555555;
        opacity: 0.9;
    }
    .simtextarea:hover {
        outline: none;
        border-color: var(--vscode-focusBorder, #272727);
    }
    .simtextarea:focus {
        outline: 1px solid orange;
    }

    .ul-select {
        position: relative;
    }

    .ul-select ul {
        position: absolute;
        top: 28px;
        left: 2px;
        padding: 0;
        z-index: 5;
        width: 250px;
        display: none;
        list-style: none;
        border: 1px solid #555555;
        font-size: 0px;
    }

    .ul-select li a {
        display: inline-block;
        width: 100%;
        height: 22px; 
        padding-top: 3px;
        color: var(--vscode-menu-foreground, #ffffff);
        text-indent: 5px;
        background: var(--vscode-menu-background, #000000);
        font-family: "Microsoft YaHei";
        font-size: 13px;
        text-decoration: none;
    }

    .ul-select li a:hover {
        color: var(--vscode-menu-selectionForeground, #ffffff);
        background: var(--vscode-menu-selectionBackground, #2979f1); 
    }
</style>
<script type="text/javascript">
    var mode = 0;
    var flag = 0;
    let vscode = acquireVsCodeApi();
    
    function sendGnParamMsg() {
        var outputCodeDir = document.getElementById("outputCodeDirid").value;
        var originCodeDir = document.getElementById("originCodeDirid").value;
        var inputScriptDir = document.getElementById("inputScriptDirid").value;
        var scriptType = document.getElementById("scriptTypeid").value;
        var transplantDir = document.getElementById("transplantDirid").value;
        var subsystemName = document.getElementById("test_subsystemid").value;
        var componentName = document.getElementById("test_partid").value;
        var compileOptions = document.getElementById("compileOptionsid").innerText.replaceAll("\n", "");
        var extFileRadio = document.getElementById("extFileRadio");
        var extFlagRadio = document.getElementById("extFlagRadio");
        var extFileInput = document.getElementById("extFileInput");
        var extFlagInput = document.getElementById("extFlagInput");

        var result = {
            msg: "gn",
            outputCodeDir: outputCodeDir,
            originCodeDir: originCodeDir,
            inputScriptDir: inputScriptDir,
            scriptType: scriptType,
            transplantDir: transplantDir,
            subsystemName: subsystemName,
            componentName: componentName,
            compileOptions: compileOptions,
            extFile: extFileRadio.checked ? extFileInput.value : "",
            extFlag: extFlagRadio.checked ? extFlagInput.value : ""
        }
        vscode.postMessage(result);
    }

    function selectinputScriptDir() {
        var result = {
            msg: "selectinputScriptDir",
            mode: 0,
        }
        vscode.postMessage(result);
    }

    function selectoutputCodePath(message) {
        var result = {
            msg: message,
            mode: 1,
        }
        vscode.postMessage(result);
    }

    function selectoriginCodePath(message) {
        var result = {
            msg: message,
            mode: 1,
        }
        vscode.postMessage(result);
    }

    function selecttransplantPath(message) {
        var result = {
            msg: message,
            mode: 1,
        }
        vscode.postMessage(result);
    }

    function cancel() {
        var result = {
            msg: "cancel"
        }
        vscode.postMessage(result);
    }

    function getoutputCodeDirPath(filepath) {
        let fileTempName = "out";
        let pos = filepath.indexOf(fileTempName);
        filepath = filepath.substr(pos);
        return filepath;
    }

    function getinputScriptDirPath(filepath) {
        let fileTempName = "third_party";
        let pos = filepath.indexOf(fileTempName);
        filepath = filepath.substr(pos);
        return filepath;
    }

    function gettransplantDirPath(filepath) {
        let pos = filepath.lastIndexOf('/');
        filepath = filepath.substr(pos);
        return filepath;
    }

    window.addEventListener('message', event => {
            const message = event.data.msg;
            const path = event.data.path;
            if (message == "selectinputScriptDir") {
                let filepath = getinputScriptDirPath(path);
                document.getElementById("inputScriptDirid").value = filepath;
                fillInputDir2(path);
            } else if (message == "selectoutputCodeDir") {
                let filepath = getoutputCodeDirPath(path);
                document.getElementById("outputCodeDirid").value = filepath;
                fillInputDir(path);
            } else if (message == "selectoriginCodeDir") {
                document.getElementById("originCodeDirid").value = path;
            } else if (message == "selecttransplantDir") {
                let filepath = gettransplantDirPath(path);
                document.getElementById("transplantDirid").value = filepath;
            } else if (message == "colorThemeChanged") {
                reloadFileImgPic();
            }
            else {
                console.log("param is error");
            }
    })

    function fillInputDir(fileNames){
        let getDir;
        let fileName;
        fileName = fileNames;
        let fileTempName = "out";
	    let pos = fileName.indexOf(fileTempName);
        getDir = fileName.substring(0,pos-1);
        document.getElementById("originCodeDirid").value = getDir;
        document.getElementById("inputScriptDirid").value = getDir;
    }

    function fillInputDir2(fileNames){
        let getDir;
        let fileName;
        fileName = fileNames;
        let fileTempName = "third_party";
        let pos = fileName.indexOf(fileTempName);
        fileName = fileName.substr(pos);
        getDir = fileName.substring(0,fileName.lastIndexOf('/'));
        document.getElementById("transplantDirid").value = getDir;
    }

    function showElement(id){   
        document.getElementById(id).style.display = ""; 
    }  

    function hideElement(id){     
        document.getElementById(id).style.display = "none"; 
    }

    function selectBlur(inputObj) {
        var t = inputObj;
        setTimeout(() => {t.nextSibling.nextSibling.style.display = 'none';},150);
    }

    function selectFocus(inputObj) {
        inputObj.nextSibling.nextSibling.style.display = 'block';
    }

    function liClick(liObj) {
        liObj.parentNode.previousSibling.previousSibling.value = liObj.innerText;
    }

    function isDarkColor(colorArr) {
        let grayLevel = colorArr[0] * 0.299 + colorArr[1] * 0.587 + colorArr[2] * 0.114;
        return grayLevel < 192;
    }

    function reloadFileImgPic() {
        var bodyobj = document.getElementsByTagName("body")[0];
        var extFileRadio11 = document.getElementById("extFileRadio");
        var bgStyle = document.defaultView.getComputedStyle(bodyobj, null);  
        var bgColor = bgStyle.getPropertyValue("background-color").match(/\d{1,3}/g); 
        var isDarkBackground = true;
        if (bgColor) { 
            isDarkBackground = isDarkColor(bgColor);
        }

        var fileImgPng = isDarkBackground ? "file.png" : "file_black.png"
        var currentFileImgPath = document.getElementById("outputCodeDirImg").src;
        var fileImgPath = currentFileImgPath.substr(0, currentFileImgPath.lastIndexOf("/") + 1);
        fileImgPath += fileImgPng;
        document.getElementById("outputCodeDirImg").src = fileImgPath;
        document.getElementById("originCodeDirImg").src = fileImgPath;
        document.getElementById("inputScriptDirImg").src = fileImgPath;
        document.getElementById("transplantDirImg").src = fileImgPath;
    }
</script>
<body>
<div class="tabs">
    <div class="tab">
        <label for="tab1">Gn-Gen</label>
        <table style="border-spacing:0px 5px; margin-left: 20px; margin-top: 38px; width: 500px;">
            <tr>
                <td width="110px">工程输出路径*:</td>
                <td width="340px">
                    <input class="text" accept="text" id="outputCodeDirid" value="out\rk3568">
                    <img id="outputCodeDirImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectoutputCodePath('selectoutputCodeDir')">
                </td>
            </tr>
            <tr>
                <td>工程源码路径*:</td>
                <td>
                    <input class="text" type="text" id="originCodeDirid">
                    <img id="originCodeDirImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectoriginCodePath('selectoriginCodeDir')">
                </td>
            </tr>
            <tr>
                <td>输入脚本路径*:</td>
                <td>
                    <input class="text" type="text" id="inputScriptDirid" onchange="inputChange()" onporpertychange="inputChange() ">
                    <img id="inputScriptDirImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectinputScriptDir()">
                </td>
            </tr>
            <tr>
                <td>输入脚本类型*:</td>
                <td>
                    <div class="ul-select"><span></span>
                        <input class="text" type="text" id="scriptTypeid" value="cmake" readonly="readonly" onfocus="selectFocus(this);" onblur="selectBlur(this);" />
                        <ul>
                            <li onclick="liClick(this);"><a href="">make</a></li>
                            <li onclick="liClick(this);"><a href="">cmake</a></li>
                            <li onclick="liClick(this);"><a href="">scons</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td>GN生成路径*:</td>
                <td>
                    <input class="text" type="text" id="transplantDirid" value="third_party">
                    <img id="transplantDirImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selecttransplantPath('selecttransplantDir')">
                </td>
            </tr>
            <tr>
                <td>子系统名称*:</td>
                <td>
                    <input class="text" type="text" id="test_subsystemid" value="test_subsystem">
                </td>
            </tr>
            <tr>
                <td>组件名称*:</td>
                <td>
                    <input class="text" type="text" id="test_partid" value="test_part">
                </td>
            </tr>
            <tr>
                <td>编译选项:</td>
                <td>
                    <div class="simtextarea" id="compileOptionsid" contenteditable="true"><br /></div>
                </td>
            </tr>
            <tr>
                <td>扩展文件类型:</td>
                <td>
                    <input type="radio" id="extFileRadio" name="extFileRadio" onClick="showElement('extFileTr')" style="margin-left: 8px;">是</input> 
                    <input type="radio" name="extFileRadio" onClick="hideElement('extFileTr')" checked>否</input>
                    <a href="" target="_blank" title="添加编译脚本需要支持的特殊文件类型，&#10;多个类型之间用英文逗号分隔。&#10;例如：.cc, .hpp">
                        <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button>
                    </a>
                </td>
            </tr>
            <tr id="extFileTr" style="display: none;">
                <td style="padding-bottom: 15px;">扩展文件后缀:</td>
                <td style="padding-bottom: 15px;">
                    <input class="text" type="text" id="extFileInput" placeholder="文件后缀名，如：.cc, .hpp"/>
                </td>
            </tr>
            <tr>
                <td>扩展编译选项:</td>
                <td>
                    <input type="radio" id="extFlagRadio" name="extFlagRadio" onClick="showElement('extFlagTr')" style="margin-left: 8px;">是</input> 
                    <input type="radio" name="extFlagRadio" onClick="hideElement('extFlagTr')" checked>否</input>
                    <a href="" target="_blank" title="添加编译脚本需要支持的特殊编译选项，&#10;多个选项之间用英文逗号分隔。&#10;例如：--target=, -march=">
                        <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button>
                    </a>
                </td>
            </tr>
            <tr id="extFlagTr" style="display: none;">
                <td style="padding-bottom: 15px;">扩展选项名称:</td>
                <td style="padding-bottom: 15px;">
                    <input class="text" type="text" id="extFlagInput" placeholder="编译选项，如：--target=, -march="/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button" class="button" onclick="cancel()" style="background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button>
                    <button type="button" class="button" onclick="sendGnParamMsg()" style="background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Ok</button>
                    <a href="https://gitee.com/openharmony/napi_generator" target="_blank">
                        <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
<script>
    reloadFileImgPic();
</script>